<template>
	<div>
		<Search></Search>
        <div style="margin-top: 1.2rem">
             <div id="type_wrapper">
                <GoodsType v-if="type == 'normal'" @change="typeChange"></GoodsType>
            </div>
            <div id="goods_wrapper">
                <div v-for="goods in goodsList" class="goods-container"
                    :key="goods.pre_goods_id">
                    <GoodsItem :goods="goods"></GoodsItem>
                </div>
            </div>
        </div>
        <div class="middle-loading-tip" v-show="page1Loading">加载中…</div>
        <div class="nothing-tip" v-show="noData">暂无任何数据</div>
        <LoadMore :bottomMethod="toBottom" :allLoaded="allLoaded && page>1"></LoadMore>   
	</div>
</template>
<script>
import Search from '@/components/Search'
import GoodsType from './GoodsType'
import GoodsItem from '@/components/GoodsItem'
import LoadMore from '@/components/LoadMore'
import { mapGetters, mapActions } from 'vuex'
import { Indicator } from 'mint-ui'
export default{
	name: 'GoodsList',
	async created(){
        // 搜索模式
        if(this.$route.query.type === 'search') {
            this.type = 'search'
            this.search = this.$route.params.classId
            console.log(this.search)
            document.title = `搜索-${this.search}`
        }
        // 普通商品列表模式
        else {
            this.classId = this.$route.params.classId
        }
        this.firstPage()
    },
	data(){
		return{
            type: 'normal',
            classId: '',
            classAppendId: '',
            search: '',
            page: 0,
            page1Loading: false,
            loadMoreEnable: true,
            allLoaded: false
        }
    },
    computed:{
        ...mapGetters({
            goodsList: 'goods/goodsList',
        }),
        noData(){
            return !this.goodsList.length && !this.page1Loading
        }
    },
    methods: {
        ...mapActions({
            getGoodsList: 'goods/getGoodsList',
            searchGoods: 'goods/search',
        }),
        async firstPage(){
            this.page1Loading = true
            await this.nextPage()
            this.page1Loading = false            
        },
        async nextPage(){
            this.page++
            const list = this.type === 'normal' ? 
            await this.getGoodsList({
                classId: this.classId,
                classAppendId: this.classAppendId,
                page: this.page
            }) : 
            await this.searchGoods({
                search: this.search,
                page: this.page
            })
            if(!list.length && this.page > 1) this.allLoaded = true
            console.log(`classId:${this.classId}, classAppendId:${this.classAppendId}, page:${this.page}`)      
        },
        async toBottom(){
            await this.nextPage()
        },
        typeChange({classId, classAppendId}){
            this.classId = classId
            this.classAppendId = classAppendId
            this.$store.commit('goods/clearList')
            this.page = 0
            this.allLoaded = false
            this.firstPage()
        }
    },
    beforeDestroy(){
        this.$store.commit('goods/clearList')
    },
    components: { Search, GoodsType, GoodsItem, LoadMore }
}
</script>
<style lang="less" scoped>
#type_wrapper{
    margin-top:1.1rem;
    position: fixed;
    top: 0;
    left: 0;
}
.goods-container{
    &:nth-child(2n){
		margin-left: .1rem;
	}
	width: 4.93rem;
	border-bottom: 0.03rem solid #bbb;
	display: inline-block;
}
</style>
